<template>
    <div>
        <nav-swiper
            :data="tabs"
            v-model="currentIndex"
            slideActiveClass="us-scroll-active-line-col"
            slideClass="us-scroll-line-col"
        >
            <template v-slot="{ item }">
                <!--    hack: fix safria 浏览器中切换nav 颜色变化 异常问题                    -->
                <label class="us-nav-tit" :class="{ active: item.channelId === channelId }">{{
                    item.channelName
                }}</label>
            </template>
        </nav-swiper>
    </div>
</template>

<script>
import NavSwiper from 'components/nav-swiper/nav-swiper';
import './news-nav.scss';
export default {
    name: 'DuoduocaiH5NewsNav',
    components: {
        NavSwiper,
    },
    data() {
        return {};
    },
    props: {
        tabs: Array,
        channelId: Number,
    },
    mounted() {},
    computed: {
        currentIndex: {
            set(index) {
                this.tabs[index] && this.tabs[index].channelId + '' && this.changeTabs(this.tabs[index].channelId);
            },
            get() {
                return this.tabs.findIndex((m) => m.channelId === this.channelId);
            },
        },
    },
    methods: {
        changeTabs(channelId, index) {
            // if (this.channelId === channelId) return;
            this.$emit('changeTab', channelId);
        },
    },
};
</script>

<style lang="scss"></style>
